<template>
  <div>
    <FormPanel
      ref="from"
      :list="formList"
      :cols="3"
      :formType="type"
      @formChange="changeHandle"
      :isSubmitBtn="false"
      labelWidth="100"/>
    <BreakSpace label="处理明细" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      height="auto"
      :isColumnFilter="false"
      :isPagination="false"
      :isToperInfo="false"
      :columns="columns"
      :params="fetchParams"
      :dataSource="ccontroldealwithlist"
      :isSelectColumn="false"
      columnsRef="jzySeries"
      :onColumnsChange="columns => this.columns = columns"
    />
    <div class="dialogBottmView">
      <el-button @click="closeDialog" type="primary">返回</el-button>
    </div>
  </div>
</template>

<script>
  // 单据状态（A:未确认，B:已确认，C：未控车，D：已控车,E:处理中,F:关闭）
  const statusBill=[
    {text: '未确认', value: 'A'},
    {text: '已确认', value: 'B'},
    {text: '未控车', value: 'C'},
    {text: '已控车', value: 'D'},
    {text: '处理中', value: 'E'},
    {text: '关闭', value: 'F'},
  ]
  const one=[
    {text: '车辆告警', value: '20'},
  ]
  const two=[
    {text: '一级推送', value: '1'},
    {text: '二级推送', value: '2'},
    {text: '弹屏', value: '3'},
  ]
  import { getdealwithlist } from '@/api/customerService/arbitration/index';

  export default {
    name: 'detil',
    props: {
      type: {
        type: String,
        default: 'add'
      },
      rowData: {
        type: Object,
        default: () => ({})
      }
    },
    created() {
      this.formList.forEach(x => {
        if (x.fieldName === 'failurePhenomenon' || x.fieldName === 'failureCause' || x.fieldName === 'maintenanceDetail') {
          if (this.rowData[x.fieldName]){
            const arry=JSON.parse(this.rowData[x.fieldName])
            const newarry = arry.map( item=> {return item.id })
            x.initialValue = newarry
            if (x.fieldName === 'failurePhenomenon'){
              const valuelist = arry.find( item=> {return item.id==='2'})
              const valuelist1 = arry.find( item=> {return item.id==='3'})
              x.itemList[1].value1=valuelist.mileage1
              x.itemList[1].value2=valuelist.mileage2
              x.itemList[2].value1=valuelist1.mileage1
            }
          }
        } else {
          x.initialValue = this.rowData[x.fieldName];
        }
      });
      this.fetchParams.id=this.rowData.id
      getdealwithlist(this.fetchParams).then(res=>{
        this.ccontroldealwithlist=res.data.records
      })
    },
    data() {
      this.saveData = null;
      return {
        fetchParams:{id:''},
        columns: this.createTableColumns(),
        ccontroldealwithlist:[],
        formList: this.createTopFilterList()
      };
    },
    methods: {
      //  处理明细列表
      createTableColumns(){
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '工单号',
            dataIndex: 'workOrderNo',
            sorter: true,
          },
          {
            title: '描述',
            dataIndex: 'remarks',
            sorter: true,
          },
          {
            title: '状态',
            dataIndex: 'statusBill',
            dictItems:statusBill,
            sorter: true,
          },
          {
            title: '操作日期',
            dataIndex: 'createdAt',
            dateFormat:'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '操作人员',
            dataIndex: 'handleBy',
            sorter: true,
          }
        ]
      },
      createTopFilterList() {
        return [
          {
            type: 'BREAK_SPACE',
            label: '基础信息'
          },
          {
            type: 'INPUT',
            label: '工单号',
            fieldName: 'oemOrderId',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '车型',
            fieldName: 'series',
            initialValue: '',
          },
          {
            type: 'SELECT',
            label: '故障一级类别',
            fieldName: 'casetypeOne',
            initialValue: '',
            itemList:one
          },
          {
            type: 'SELECT',
            label: '故障二级类别',
            fieldName: 'casetypeTwo',
            initialValue: '',
            itemList:two
          },
          {
            type: 'INPUT',
            label: '经销商代码',
            fieldName: 'dealerCode',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '经销商名称',
            fieldName: 'dealerName',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '客户姓名',
            fieldName: 'ownerName',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '客户电话',
            fieldName: 'custphone',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '客户所在城市',
            fieldName: 'custcity',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '客户地址',
            fieldName: 'custaddress',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '故障编码',
            fieldName: 'errorcode',
            initialValue: '',
          },
          {
            type: 'INPUT',
            label: '故障描述',
            fieldName: 'errordesc',
            initialValue: '',
          },
          {
            type: 'TEXT_AREA',
            label: '补充描述',
            fieldName: 'suppdesc',
            selfCols: 2,
            initialValue: '',
          },
          {
            type: 'BREAK_SPACE',
            label: '整车信息'
          },
          {
            type: 'INPUT',
            label: 'VIN',
            fieldName: 'vin',
            initialValue: '',
            disabled: true
          },
          {
            type: 'INPUT',
            label: '车型',
            fieldName: 'series',
            initialValue: '',
            disabled: true
          },
          {
            type: 'INPUT',
            label: '里程',
            fieldName: 'mileage',
            initialValue: '',
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'INPUT',
            label: '电商厂商',
            fieldName: 'batterySupplier',
            initialValue: '',
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'BREAK_SPACE',
            label: '处理信息'
          },
          {
            type: 'BREAK_SPACE',
            colRender:option=>{
              return (
                <h3 class='duty'>故障现象备注</h3>
              )
            }
          },
          {
            type: 'MULTIPLE_CHECKBOX',
            label: '',
            fieldName: 'failurePhenomenon',
            selfCols: 3,
            initialValue: '',
            rules: [
              {
                required: true, message: '至少选择一项故障现象备注', trigger: 'change'
              }],
            itemList: [
              { text: '弹屏故障', value: '1' },
              {
                text: '满电里程不足',
                value: '2',
                value1: '',
                value2: '',
                render: item => {
                  return (<div>
                    满电里程不足满电显示
                    <el-input disabled style="width: 60px" v-model={item.value1}/>
                    km,
                    满电行驶
                    <el-input disabled style="width: 60px;" v-model={item.value2}/>
                    km
                  </div>);
                }
              },
              {
                text: '里程末端掉电',
                value: '3',
                value1: '',
                render: item => {
                  return (<div>
                    里程末端掉电,剩余
                    <el-input disabled style="width: 60px" v-model={item.value1}/>
                    km 无法行驶
                  </div>);
                }
              },
              { text: '无法行驶', value: '4' },
              { text: '无法快充', value: '5' },
              { text: '快充过慢', value: '6' },
              { text: '无法慢充', value: '7' },
              { text: '慢充慢', value: '8' },
              { text: '其他', value: '9' }
            ]
          },
          {//22
            type: 'TEXT_AREA',
            label: '信息补充',
            fieldName: 'failurePhenomenonExtra',
            placeholder: '请输入',
            initialValue: '',
            selfCols: 3,
            maxlength: 300,
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'BREAK_SPACE',
            colRender:option=>{
              return (
                <h3 class='duty'>故障原因详细描述</h3>
              )
            }
          },
          {
            type: 'MULTIPLE_CHECKBOX',
            label: '',
            fieldName: 'failureCause',
            selfCols: 3,
            initialValue: '',
            itemList: [
              { text: '压差过大', value: '1' },
              { text: '电芯故障', value: '2' },
              { text: 'BMS故障', value: '3' },
              { text: '低压插件/线束故障', value: '4' },
              { text: '高压插件/线束故障', value: '5' },
              { text: '扭矩不足', value: '6' },
              { text: '铜排松动', value: '7' },
              { text: '模组虚焊', value: '8' },
              { text: '内部进水', value: '9' },
              { text: '其他', value: '10' }
            ],
            rules: [
              {
                required: true, message: '至少选择一项故障原因详情描述', trigger: 'change'
              }]
          },
          {//22
            type: 'TEXT_AREA',
            label: '信息补充',
            fieldName: 'failureCauseExtra',
            placeholder: '请输入',
            initialValue: '',
            selfCols: 3,
            maxlength: 300,
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'BREAK_SPACE',
            colRender:option=>{
              return (
                <h3 class='duty'>检测及维修情况说明</h3>
              )
            }
          },
          {
            type: 'MULTIPLE_CHECKBOX',
            label: '',
            fieldName: 'maintenanceDetail',
            selfCols: 3,
            initialValue: '',
            itemList: [
              { text: '电芯补电', value: '1' },
              { text: '更换整包', value: '2' },
              { text: '更换单体', value: '3' },
              { text: '更换模组', value: '4' },
              { text: '更换子板', value: '5' },
              { text: '更换从板', value: '6' },
              { text: '更换电极盒', value: '7' },
              { text: '更换采集线束', value: '8' },
              { text: '更换低压线束', value: '9' },
              { text: '更换BMS程序', value: '11' },
              { text: '更换保险', value: '12' },
              { text: '其他', value: '13' }
            ],
            rules: [
              {
                required: true, message: '至少选择一项检测维修情况说明', trigger: 'change'
              }]
          },
          {//22
            type: 'TEXT_AREA',
            label: '信息补充',
            fieldName: 'maintenanceDetailExtra',
            placeholder: '请输入',
            initialValue: '',
            selfCols: 3,
            maxlength: 300,
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'INPUT',
            label: '服务站维修技师',
            labelWidth:'125px',
            fieldName: 'maintenanceTechnician',
            initialValue: '',
            selfCols: 1,
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          },
          {
            type: 'INPUT',
            label: '电池供应商售后人员',
            fieldName: 'afterSalePerson',
            labelWidth:'150px',
            initialValue: '',
            selfCols: 1,
            rules: [{
              required: true,
              message: '必填',
              trigger: 'change'
            }]
          }
        ];
      },
      //返回操作
      closeDialog() {
        this.$emit('close', { visible: false });
      },
      changeHandle(val) {
        this.saveData = val;
      }
    }
  };
</script>

<style scoped>
  .duty {
    width: 80%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    background: #eee;
    text-indent: 5px;
    margin-left: 80px;
  }
</style>
